<template>
  <el-scrollbar height="100vh">
    <div class="container">
      <el-affix :offset="1">
        <h1 class="title">简单的标记</h1>
      </el-affix>
      <div id="map" class="map-x" ref="mapBox"></div>
      <div ref="popup" class="popup" v-show="shopPopup"></div>
      <dl>
        <dt>简单的标记</dt>
        <dd>跟<router-link :to="{path: '/popup'}"><span style="color: blue">标记 marker</span></router-link>差不多，可以看这个。</dd>
      </dl>
      <div class="codestyle"><Code /></div>
    </div>
  </el-scrollbar>
</template>
<script>
import { toRefs, reactive, ref, onMounted } from 'vue-demi'
import Code from './code.vue'
import 'ol/ol.css'
import { Map, View, Feature } from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import Point from 'ol/geom/Point'
import * as style from 'ol/style'
import VectorSource from 'ol/source/Vector'
import { Vector as VectorLayer } from 'ol/layer'
import Overlay from 'ol/Overlay'

// 引入图标图片
import iconPng from '@/assets/icon/bu.png'
export default {
  setup () {
    const state = reactive({
      map: ref(null),
      mapBox: ref(null),
      popup: ref(null),
      overlay: null,
      shopPopup: false
    })

    const init = () => {
      // 创建图标特性
      const iconFeature = new Feature({
        geometry: new Point([0, 0]), // 图标位置
        name: '你点我了',
        population: 4000,
        rainfall: 500
      })

      const iconStyle = new style.Style({
        image: new style.Icon({
          anchor: [0.5, 46], // 根据图标的大小，对应上面 [0, 0] 的坐标
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: iconPng // 或者 src: require('../../assets/images/icon.png')
        })
      })

      // 把样式应用到图标上
      iconFeature.setStyle(iconStyle)

      // 创建矢量容器，将图标特性添加进容器中
      const vectorSource = new VectorSource({
        features: [iconFeature]
      })

      // 创建矢量图层
      const vectorLayer = new VectorLayer({
        source: vectorSource
      })

      // 底图源
      const rasterLayer = new Tile({
        source: new XYZ({
          url: 'https://api.maptiler.com/maps/topographique/256/{z}/{x}/{y}.png?key=B3EG5uYPUvFucEWVoCa3',
          crossOrigin: ''
        })
      })

      state.map = new Map({
        target: state.mapBox,
        layers: [rasterLayer, vectorLayer],
        view: new View({
          // 地图视图
          projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
          center: [0, 0],
          zoom: 1 // 地图缩放级别（打开页面时默认级别）
        })
      })

      mapClick()
    }

    const mapClick = () => {
      state.map.on('singleclick', evt => {
        // 创建弹窗并添加到Map
        state.overlay = new Overlay({
          element: state.popup,
          positioning: 'bottom-center',
          stopEvent: false,
          offset: [0, -50]
        })
        state.map.addOverlay(state.overlay)

        // 获取图层
        const feature = state.map.forEachFeatureAtPixel(evt.pixel, function (feature) {
          return feature
        })

        // 判断如果有图层时显示弹窗否则不显示
        if (feature) {
          state.shopPopup = true
          state.popup.innerHTML = feature.values_.name
          state.overlay.setPosition(evt.coordinate)
        } else {
          state.shopPopup = false
        }
      })
    }

    onMounted(() => {
      init()
    })

    return {
      init,
      ...toRefs(state)
    }
  },
  components: {
    Code
  }
}
</script>
<style lang="scss" scoped>
@import '../../css/main.scss';
.select {
  margin: 20px 0;
}
.popup {
  background: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
</style>
